Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add hamburger menu on small screens #16388

Merged
merged 1 commit into from Jun 1, 2023
Merged

Add hamburger menu on small screens #16388

merged 1 commit into from Jun 1, 2023

Conversation

fallaciousreasoning
Copy link
Contributor

@fallaciousreasoning fallaciousreasoning commented Dec 16, 2022 •
edited

Resolves brave/brave-browser#24352

Screencast.from.2022-12-16.14-52-57.webm

Note: This depends on #18156 which enables using Leo from inside Polymer.

Note: The color icons don't look right at the moment because there's a bug in the Leo Icon component - the fix is here brave/leo#269

Submitter Checklist:

  • I confirm that no security/privacy review is needed, or that I have requested one
  • There is a ticket for my issue
  • Used Github auto-closing keywords in the PR description above
  • Wrote a good PR/commit description
  • Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
  • Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
  • Checked the PR locally:
    • npm run test -- brave_browser_tests, npm run test -- brave_unit_tests wiki
    • npm run lint, npm run presubmit wiki, npm run gn_check, npm run tslint
  • Ran git rebase master (if needed)

Reviewer Checklist:

  • A security review is not needed, or a link to one is included in the PR description
  • New files have MPL-2.0 license header
  • Adequate test coverage exists to prevent regressions
  • Major classes, functions and non-trivial code blocks are well-commented
  • Changes in component dependencies are properly reflected in gn
  • Code follows the style guide
  • Test plan is specified in PR before merging

After-merge Checklist:

Test Plan:

  1. Open brave://settings
  2. Shrink the screen
  3. A hamburger menu should appear
  4. Clicking the menu should open the settings sidebar

@github-actions github-actions bot added the CI/storybook-url Deploy storybook and provide a unique URL for each build label Dec 16, 2022
fallaciousreasoning
fallaciousreasoning commented Dec 16, 2022
View reviewed changes
ui/webui/resources/br_elements/br_toolbar/br_toolbar.ts
@@ -105,17 +105,26 @@ Polymer({

/** @private */
onMenuTap_: function() {
console.debug('[br_toolbar] Not Implemented: onMenuTap_')
this.dispatchEvent(new CustomEvent(
'cr-toolbar-menu-tap', {bubbles: true, composed: true}))
},

focusMenuButton() {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know if these (other than onMenuTap_) are needed but I thought I might as well implement them while I'm adding the button.

@fallaciousreasoning
Copy link
Contributor Author

@petemill mind taking a look at this?

@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@simonhong
Copy link
Member

I'm seeing weird behavior. Some icons are shown twice in toggle. I rebased this PR onto latest master right before.
image

@simonhong
Copy link
Member

Hmm, On Win11 chromium logo is visible. This one is also rebased onto latest master(cr109)
image

@fallaciousreasoning
Copy link
Contributor Author

Oh wow, that's funky. I'll rebase and see if it repros

@fallaciousreasoning
Copy link
Contributor Author

Wow, I've been digging into this a bit more. It seems to be caused by some crazy interplay between the polymer dom-if element, the iron-icon, the iron-iconset-svg and our Brave overrides for the iron-icons 😆 Still trying to work it out

@fallaciousreasoning
Copy link
Contributor Author

Looks like it's probably caused by this update
https://chromium-review.googlesource.com/c/chromium/src/+/3653306

@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@simonhong
Copy link
Member

All good except brave logo below :)
Screenshot 2023-01-25 at 11 19 44 AM

@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@simonhong
Copy link
Member

Sorry I forgot to mention. Below chromium icon should be replaced with our logo.
image

@fallaciousreasoning
Copy link
Contributor Author

@simonhong looks like the latest Chromium version adds proper support for TrustedTypes. Unfortunately, this means my parseFromString here is a policy violation. Not too sure what to do next 😆

@simonhong
Copy link
Member

@simonhong looks like the latest Chromium version adds proper support for TrustedTypes. Unfortunately, this means my parseFromString here is a policy violation. Not too sure what to do next 😆

Sorry, I couldn't give a good advice for this PR. I'll pass review to @petemill

@fallaciousreasoning
Copy link
Contributor Author

Nah, no worries 😆 I have no idea what caused the weird breaks in the sidebar. Thanks for all your help!

@fallaciousreasoning fallaciousreasoning mentioned this pull request Apr 20, 2023
Merged
25 tasks
@fallaciousreasoning fallaciousreasoning force-pushed the settings-hamburger branch 2 times, most recently from 58d087e to c46ff13 Compare May 2, 2023 00:08
@fallaciousreasoning fallaciousreasoning requested review from a team as code owners May 2, 2023 00:08
@fallaciousreasoning fallaciousreasoning changed the base branch from master to dl-leo May 2, 2023 00:08
@fallaciousreasoning fallaciousreasoning removed request for a team May 2, 2023 00:08
@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@fallaciousreasoning fallaciousreasoning requested a review from a team as a code owner May 9, 2023 23:10
@diracdeltas diracdeltas added the CI/run-audit-deps Check for known npm/cargo vulnerabilities (audit_deps) label May 9, 2023
Base automatically changed from dl-leo to master May 30, 2023 21:33
@fallaciousreasoning fallaciousreasoning removed the request for review from a team May 30, 2023 22:33
@fallaciousreasoning
Copy link
Contributor Author

@simonhong mind taking another look, now everything under it has merged?

@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@simonhong
Copy link
Member

Looks nice on Windows 👍🏼
image

@fallaciousreasoning
Copy link
Contributor Author

Exciting! This might finally be ready 😆

@petemill & @simonhong mind having another review?

simonhong
simonhong approved these changes May 31, 2023
View reviewed changes
Copy link
Member

@simonhong simonhong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

++ works great on linux also :)

petemill
petemill approved these changes Jun 1, 2023
View reviewed changes
Copy link
Member

@petemill petemill left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Beautiful

@fallaciousreasoning fallaciousreasoning merged commit e6b5026 into master Jun 1, 2023
16 checks passed
@fallaciousreasoning fallaciousreasoning deleted the settings-hamburger branch June 1, 2023 21:51
@github-actions github-actions bot added this to the 1.54.x - Nightly milestone Jun 1, 2023
@github-actions github-actions bot removed the CI/run-audit-deps Check for known npm/cargo vulnerabilities (audit_deps) label Jun 1, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@petemill petemill petemill approved these changes

@simonhong simonhong simonhong approved these changes

Assignees

@fallaciousreasoning fallaciousreasoning

Labels
CI/storybook-url Deploy storybook and provide a unique URL for each build
Projects
None yet
Milestone
1.57.x - Release
5 participants
@fallaciousreasoning @brave-builds @simonhong @petemill @diracdeltas